<template>
	<view class="">
		<!-- 弹出层 -->
		<u-popup :show="showChoose" :round="20" mode="bottom" @close="close" @open="open" :closeable="true">
			<view class="">
				<view class="zwPopup">
					<view class="zwPopup_t">{{ title }}</view>
					<view class="zwPopup_content">
						<!-- 	<u-checkbox-group iconPlacement="right" placement="row" @change="checkboxChange" v-if="!isRadio">
							<view class="list" v-for="(item, index) in chooseList" :key="index">
								<u-checkbox activeColor="red" :label="item.name" shape="circle" :name="JSON.stringify(item)"></u-checkbox>
								<u-line color="#E6E6E6"></u-line>
							</view>
						</u-checkbox-group> -->

						<u-radio-group iconPlacement="right" @change="groupChange" v-if="isRadio" class="radioBox">
							<view class="">
								<view class="list" v-for="(item, index) in chooseList" :key="index">
									<view class="list-item"><u-radio activeColor="#FF5900" :label="item.name" :name="JSON.stringify(item)"></u-radio></view>
									<u-line color="#E6E6E6"></u-line>
								</view>
							</view>
						</u-radio-group>
					</view>
					<view class="choosePetBottom">
						<view style="background-color: #FF5900; color: #fefeff" @click="sure">
							<text>{{ btnTitle }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import pageMixin from '@/mixins/pageMixin';

export default {
	mixins: [pageMixin],
	components: {},
	data() {
		return {
			arr: []
		};
	},
	props: {
		title: {
			type: String,
			default: '请选择'
		},
		btnTitle: {
			type: String,
			default: '确定'
		},
		chooseList: {
			type: Array,
			default() {
				return [];
			}
		},
		// 默认单选
		isRadio: {
			type: Boolean,
			default: true
		},
		showChoose: {
			type: Boolean,
			default: false
		}
	},
	computed: {},
	methods: {
		close() {
			// this.showChoose = false;
			this.$emit('update:showChoose', false);
			this.arr = [];
			// console.log('close');
		},
		open() {
			// console.log('open');
		},
		// 多选
		checkboxChange(n) {
			this.arr = [];
			n.forEach(item => {
				this.arr.push(JSON.parse(item));
			});
		},
		//单选
		groupChange(n) {
			this.arr = [JSON.parse(n)];
		},
		sure() {
			if (this.arr <= 0) {
				uni.showToast({
					title: '请选择',
					icon: 'none',
					duration: 1500
				});
			} else {
				console.log('lllllllllllllllllllllll', this.arr);
				this.$emit('getChooseList', this.arr);
				this.arr = [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.zwPopup {
	padding: 40rpx 20rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;

	.zwPopup_content {

		padding: 20rpx;
		border-radius: 20rpx;
		max-height: 60vh;
		overflow: auto;
		.list {
			width: 650rpx;
			text-align: center;

			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1a1a1a;

			.list-item {
				padding: 30rpx 0;
			}
		}
	}

	.zwPopup_t {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
		line-height: 36rpx;
		text-align: center;
		padding: 0rpx 0 40rpx 0;
	}
}
.choosePetBottom {
	width: 100%;
	height: 180rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 166rpx;

	// background-color: pink;
	view {
		margin: 20rpx;
		width: 680rpx;
		background: #f5f5f5;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		font-weight: 500;
		color: #666666;
		line-height: 32px;
	}
}
::v-deep .u-popup__content__close--top-right {
	top: 40rpx !important;
}
// ::v-deep .u-checkbox-group--row {
// 	flex-wrap: wrap !important;
// }
::v-deep .u-radio-group {
	flex-wrap: wrap !important;
	flex-direction: column !important;
}
::v-deep .u-radio-group--row {
	flex-wrap: wrap !important;
	flex-direction: column !important;
}
::v-deep .u-radio-row {
	flex-direction: column !important;
}
// ::v-deep .u-checkbox-label--right {
// 	width: 100%;
// 	height: 100rpx;
// 	text {
// 		display: inline-block;
// 		width: 100%;
// 		// background-color: pink;
// 		text-align: center;
// 	}
// }
::v-deep .u-radio-label--right {
	width: 100%;
	height: 100rpx;
	text {
		display: inline-block;
		width: 100%;
		// background-color: pink;
		text-align: center;
	}
}
// ::v-deep .u-checkbox__icon-wrap {
// 	position: relative !important;
// 	right: 30rpx !important;
// }
::v-deep .u-radio__text {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx !important;
	text-align: center;
}
::v-deep .u-radio__icon-wrap {
	position: relative;
	right: 30rpx;
}
</style>
